<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
      :is_right="true"
    ></gltitle>

    <div class="container">
      <div class="list">
        <div
          class="item"
          :class="{ grey: $route.query.coinId == undefined }"
          v-for="(item, i) in listData"
          :key="i"
        >
          <van-radio-group v-model="checkedIndex">
            <van-radio :name="i" @click="swipeCell(item, i)" checked-color="#ffdd9a">
              <van-swipe-cell>
                <van-cell
                  :border="false"
                  :title="item.chainName"
                  :value="item.address"
                />
              </van-swipe-cell>
            </van-radio>
          </van-radio-group>
        </div>
        <div class="bott" @click="path_url('/wallet/bindAddress')">
          <van-icon name="add" color="#FFDD9A" size="20" />
          <div class="n">{{ $t("page4.doc55") }}</div>
        </div>
      </div>
    </div>
    <div
      class="but_sevn"
      @click.stop="sevn"
      v-if="$route.query.coinId != undefined"
    >
      <div class="but">
        {{ $t("page4.doc64") }}
      </div>
    </div>

    <van-overlay :show="show" />
    <div class="showop" v-show="showop">
      <div class="n">
        <div class="le">{{ $t("page4.doc56") }}</div>
        <img
          @click="closure"
          class="ri"
          src="../../assets/images/deletes.png"
          alt=""
        />
      </div>
      <div class="s">{{ $t("page4.doc57") }}</div>
      <div class="but_list">
        <div @click="closure" class="but1">{{ $t("page4.doc63") }}</div>
        <div class="but2" @click="seve">{{ $t("page4.doc64") }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.$t("page4.doc54"),
      listData: [],
      show: false,
      showop: false,
      seveData: [],
      checkedIndex: "",
      swipeCellObj: {},
    };
  },

  mounted() {
    this.getBilist();
    this.swipeCellObj = {};
  },
  computed: {},
  watch: {},
  methods: {
    swipeCell(row, i) {
      this.swipeCellObj = row;
      this.checkedIndex = i;
    },
    getBilist() {
      this.$post(this.URL.wallet.address_list, {
        coinId:
          this.$route.query.coinId != undefined ? this.$route.query.coinId : "",
        chainName:
          this.$route.query.chainName != undefined
            ? this.$route.query.chainName
            : "",
        pageSize: 99,
      }).then((res) => {
        if (res.code == 0) {
          this.listData = res.data.list;

          // this.listData = [
          // {
          //     address: "TCthnzRK86U4AbogMVmYBy2NpN2wuZ7UMa",
          //     chainName: "TRX",
          //     date: "2023-12-29 07:11:21",
          //     id: 8,
          //     name: "",
          //     remark: "",
          //   },
          //   {
          //     address: "sdfsfsfwefdsfwerfwcsdfwerfwefcsfew",
          //     chainName: "TsX",
          //     date: "2023-12-29 07:11:21",
          //     id: 9,
          //     name: "",
          //     remark: "",
          //   }
          // ]
        }
      });
    },
    deleteButton(item) {
      this.show = true;
      this.showop = true;
      this.seveData = item;
    },
    seve() {
      this.$post(this.URL.wallet.address_delete, { id: this.seveData.id }).then(
        (res) => {
          if (res.code == 0) {
            this.$toast.success(res.message);
            this.getBilist();
            this.closure();
          }
        }
      );
    },
    closure() {
      this.show = false;
      this.showop = false;
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
    sevn() {
      if (this.swipeCellObj.address) {
        this.$router.replace({
          path: "/wallet/withdraw",
          query: {
            address: this.swipeCellObj.address,
          },
        });
      } else {
        this.$toast(this.$t("page4.doc65"));
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  .bott {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.4rem;

    img {
      height: 0.32rem;
      margin-right: 0.08rem;
    }

    .n {
      color: #FFDD9A;
      font-family: PingFang SC;
      font-size: 0.32rem;
      font-style: normal;
      font-weight: 400;
      margin-left: 0.05rem;
    }
  }

  .item {
    margin-top: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .van-radio-group {
      margin-right: 0.24rem;
    }

    .van-swipe-cell {
      border-radius: 0.16rem;
      // background: #E4593E;
      .van-cell {
        background: #181c21;
        color: #fff;
        font-family: Inter;
        font-size: 0.28rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        // padding: .36rem .24rem;
        // border-top-right-radius: 0.16rem;
        // border-bottom-right-radius: 0.16rem;
        // border-right: 0.08rem solid #ee0a24;
        .van-cell__title {
          flex: none;
          padding-right: 0.16rem;
          border-right: 0.02rem solid #282e3c;
        }

        .van-cell__value {
          flex: none;
          color: #fff;
          font-family: Inter;
          font-size: 0.28rem;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          padding-left: 0.16rem;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            width: 4.9rem;
          }
        }
      }
    }
  }
}

/deep/ .van-swipe-cell__right {
  right: 0.12rem;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // background-color: #E4593E !important;
  // img{
  //   height: .56rem;
  // }
  // img::before{
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   width: 100%;
  //   height: 100%;
  //   background-color: #000;
  //   border: inherit;
  //   border-color: #000;
  //   border-radius: inherit;
  //   -webkit-transform: translate(-50%,-50%);
  //   transform: translate(-50%,-50%);
  //   opacity: 0;
  //   content: ' ';
  // }
}

.showop {
  width: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -1rem;
  margin-left: -40%;
  z-index: 99;
  padding: 0.32rem 0.42rem 0.4rem 0.42rem;
  border-radius: 0.24rem;
  background: #1b202d;
  color: #fff;
  font-family: PingFang SC;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

  .n {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .le {
      font-weight: 500;
    }

    .ri {
      height: 0.32rem;
    }
  }

  .s {
    margin-top: 0.32rem;
  }

  .but_list {
    margin-top: 0.48rem;
    font-family: PingFang SC;
    font-size: 0.32rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .but1 {
      padding: 0.24rem 0rem;
      width: 100%;
      text-align: center;
      border-radius: 0.16rem;
      color: #4272ff;
      border: 0.02rem solid #4272ff;
      margin-right: 0.24rem;
    }

    .but2 {
      padding: 0.24rem 0rem;
      width: 100%;
      text-align: center;
      border-radius: 0.16rem;
      color: #ffffff;
      background: linear-gradient(90deg, #7b02fe 0%, #0570fd 100%);
    }
  }
}

.but_sevn {
  bottom: 0.94rem;
  position: fixed;
  bottom: 0.64rem;
  width: 100%;
  max-width: 8.5rem;
  padding: 0rem 0.44rem;

  .but {
    border-radius: 50rem;
    background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
    color: #000;
    text-align: center;
    font-family: PingFang SC;
    font-size: 0.28rem;
    font-style: normal;
    font-weight: 500;
    padding: 0.3rem 0rem;
  }
}

.grey {
  :deep(.van-radio-group) {
    margin-right: 0 !important;

    .van-radio__icon {
      display: none;
    }

    .van-radio__label {
      margin-left: 0;
    }

    .van-cell__value {
      overflow: inherit !important;

      span {
        display: inline-block !important;
        overflow: inherit !important;
        text-overflow: inherit !important;
      }
    }
  }
}
</style>
